<template>
  <div class="evaluationMain">
    <div class="evaluationBox">
      <div v-if="list.length > 0">
        <div class="itemBox clearfix" v-for="(item,index) in list" :key="index">
          <div class="image">
            <img src="@/assets/images/profile.jpg" alt="">
          </div>
          <div class="info">
            <div class="userTime flex align-center justify-between">
              <b>{{ item.commentUserName }}</b>
              <span>{{ item.commentTime }}</span>
            </div>
            <div class="content">
              {{ item.content }}
            </div>
          </div>
        </div>
        <div class="fanye flex align-center justify-end" v-if="false">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
      <div class="noDataBox flex align-center justify-center" v-else>
        <el-empty description="暂无评论数据" :image-size="100"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import {listCommentForIndex} from '@/api/model/comment';
export default {
  name: '',
  props: {
    modelId:{
      type:String,
      required:true,
    }
  },
  components: {},
  data() {
    return {
      loading:false,
      list:[],
      total: 0,
      queryParams:{
        modelId:this.modelId,
        pageNum: 1,
        pageSize: 10,
      }


    }
  },
  computed: {},
  watch: {

  },
  created() {
    this.getList();
  },
  mounted() {

  },
  methods: {
   async getList(){
     this.loading = true;
     const res = await listCommentForIndex(this.queryParams);
     this.list = res.rows;
     this.total = res.total;
     this.loading = false;
    }
  },
}
</script>
<style lang="scss" scoped>
.evaluationBox {
  padding: 28px 32px;
  box-shadow: 0 4px 8px 0 rgba(28, 31, 33, .1);
  border-radius: 8px;
  background: #fff;

  .itemBox {
    position: relative;
    padding: 24px 25px;
    border-bottom: 1px solid #d9dde1;

    .image {
      width: 72px;
      float: left;

      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: block;
      }
    }

    .info {
      width: calc(100% - 72px);
      float: left;

      .userTime {
        margin-bottom: 4px;
        height: 25px;

        b {
          font-size: 15px;
          color: #1c1f21;
          margin-right: 10px;
          font-weight: 700;
        }

        span {
          font-size: 12px;
          color: #9199a1;
        }
      }

      .content {
        font-size: 14px;
        color: #1c1f21;
        line-height: 22px;
        word-wrap: break-word;
        text-align: justify;
      }
    }
  }

  .fanye {
    padding-top: 28px;
  }

  .noDataBox {
    height: 600px;
  }
}
</style>
